<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
            .item{
                height: 300px;
                width: 100%;
                background-color: red;
                margin-bottom: 10px;
            }

    </style>
</head>
<body>
    <div class="box">
        <div class="item" >
            <img src="/img/3.jpg"/>
            <div>图片一</div>
        </div>
        <div class="item">
            <img src="/img/4.jpg"/>
            <div>图片二</div>
        </div>
        <div class="item">
            <img src="/img/5.jpg"/>
            <div>图片三</div>
        </div>
        <div class="item" data-src="/img/6.jpg">
            <img src="/img/3.jpg"/>
            <div>图片四</div>
        </div>
        <div class="item" data-src="/img/7.jpg">
            <img src="/img/3.jpg"/>
            <div>图片五</div>
        </div>
        <div class="item" data-src="/img/8.jpg">
            <img src="/img/3.jpg"/>
            <div>图片六</div>
        </div>
        <div class="item" data-src="/img/9.jpg">
            <img src="/img/3.jpg"/>
            <div>图片七</div>
        </div>
    </div>
    
</body>
<script>
        let clientHeight = document.documentElement.clientHeight;
        //可视区域的高度
        let  allHeight = document.documentElement.offsetHeight;
        //屏幕的所有高度
        let  itemList = document.querySelectorAll(".item");
        let  count =Math.ceil(clientHeight/(itemList[0].offsetHeight+10));

        window.onscroll = function(){
            let scrollTop = document.documentElement.scrollTop;
            let height = scrollTop +clientHeight;
            let index =Math.ceil( height/ (itemList[0].offsetHeight+10));
         
            if(index>count){

                console.log(index);

            let targetItem = itemList[index-1];

             let  src = targetItem.getAttribute("data-src");
         

            let targetImg = targetItem.querySelector("img");
            targetImg.setAttribute("src",src);
        }


        }

</script>
</html>